<template>
<div>
  <view class="user_info_wrap">
  <!-- 登录前显示 -->
  <view class="login" v-if="!userInfo.nickName">
    <navigator url="/pages/login/main">登录</navigator>
  </view>
  <!-- 登录后显示 -->
  <view class="user_img_wrap" v-else>
    <image class="img_bg" :src="userInfo.avatarUrl"></image>
    <view class="user_info">
      <image class="user_icon" :src="userInfo.avatarUrl" mode="widthFix"></image>
      <view class="user_name">{{userInfo.nickName}}</view>
    </view>
  </view>
  </view>
  <!-- 内容 -->
  <view class="user_content">
  <view class="user_main">
    <!-- 1tabs -->
    <view class="his_wrap">
      <navigator class="user_goods" url="/pages/collect/main">
        <view class="his_num">{{collectNum}}</view>
        <view class="his_name">商品关注</view>
      </navigator>
      <navigator class="user_follow">
        <view class="his_num">0</view>
        <view class="his_name">店铺关注</view>
      </navigator>
      <navigator class="user_like">
        <view class="his_num">0</view>
        <view class="his_name">喜欢</view>
      </navigator>
      <navigator class="user_history">
        <view class="his_num">0</view>
        <view class="his_name">足迹</view>
      </navigator>
    </view>
    <!-- 2我的订单 -->
    <view class="user_order">
      <view class="order_title">我的订单</view>
      <view class="order_tabs_wrap">
        <navigator url="/pages/order/main?type=1">
          <view class="iconfont icon-ding_dan"></view>
          <view class="text">全部订单</view>
        </navigator>
        <navigator url="/pages/order/main?type=2">
          <view class="iconfont icon-fukuantongzhi"></view>
          <view class="text">待付款</view>
        </navigator>
        <navigator url="/pages/order/main?type=3">
          <view class="iconfont icon-receipt-address"></view>
          <view class="text">待收货</view>
        </navigator>
        <navigator url="/pages/order/main?type=4">
          <view class="iconfont icon-receipt-address"></view>
          <view class="text">退货/退款</view>
        </navigator>
      </view>
    </view>
    <!-- 3收货地址管理 -->
    <view class="address">收货地址管理</view>
    <!-- 4反馈 -->
    <view class="feedback_wrap">
      <!-- 联系客服 -->
      <view class="feedback_item">
        <text>联系客服</text>
        <text>400-618-4000</text>
      </view>
      <!-- 意见反馈 -->
      <navigator class="feedback_item" url="/pages/feedback/main">意见反馈</navigator>
      <!-- 关于我们 -->
      <view class="feedback_item">关于我们</view>
    </view>
    <!-- 5推荐 -->
    <view class="recommend">推荐给其他人</view>
  </view>
  </view>
</div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      collectNum: 0
    };
  },
  methods:{
    onShow: function () {
      this.userInfo = wx.getStorageSync('userInfo');
      const collectList = wx.getStorageSync('collectList')
      this.collectNum = collectList.length
    },
  }
};
</script>

<style lang='less' scope>
page {
  background-color: #eee;
  height: 100%;
}

// 包裹器
.user_info_wrap {
  position: relative;
  height: 45vh;
  background-color: var(--themeColor);
  overflow: hidden;

  .login {
    position: absolute;
    // 定位
    left: 50%;
    top: 40%;
    transform: translate(-50%);
    border: 1rpx solid greenyellow;
    font-size: 38rpx;
    padding: 30rpx;
    color: #fff;
    border-radius: 10rpx;
  }

  .user_img_wrap {
    position: relative;

    // 背景
    .img_bg {
      width: 100%;
      height: 50vh;
      filter: blur(10rpx);
    }

    // 信息
    .user_info {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: 20%;
      text-align: center;

      // 头像
      .user_icon {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
      }

      .user_name {
        color: #fff;
        margin-top: 40rpx;
      }
    }
  }
}

.user_content {
  position: relative;
  color: #666;

  .user_main {
    width: 90%;
    position: absolute;
    left: 50%;
    top: -40rpx;
    padding-bottom: 100rpx;
    transform: translate(-50%);

    .his_wrap {
      display: flex;
      background-color: #fff;
      text-align: center;
      padding: 10rpx 0;

      navigator {
        flex: 1;

        .his_num {
          color: var(--themeColor);
        }
      }


    }

  }

  .user_order {
    margin-top: 30rpx;

    .order_title {
      background-color: #fff;
      border-bottom: 1rpx solid #ccc;
      padding: 20rpx;
    }

    .order_tabs_wrap {
      display: flex;
      background-color: #fff;
      text-align: center;
      padding: 10rpx 0;

      navigator {
        flex: 1;

        .iconfont {
          color: var(--themeColor);
        }

      }
    }
  }

  // 收货地址
  .address {
    background-color: #fff;
    margin-top: 30rpx;
    padding: 20rpx;

  }

  // 反馈
  .feedback_wrap {
    background-color: #fff;
    margin-top: 30rpx;
    // padding: 20rpx;
    width: 100%;

    // 子项
    .feedback_item {
      padding: 20rpx;
      border-bottom: 1rpx solid #ccc;
    }
  }

  .recommend {
    background-color: #fff;
    padding: 20rpx;
    margin-top: 30rpx;
  }

}
</style>